<template>
	<wd-popup v-model="show" position="bottom" :z-index="999" closable safe-area-inset-bottom>
		<view class="poupu-title"> 选择区域 </view>
	  <scroll-view scroll-y class="area-list">
			<view class="area-item" v-for="item in areaList" :key="item.id" @tap="pickArea(item.id)">
				<view class="area-name"> {{ item.name }} </view>
				<view class="desc"> 描述：{{ item.description }} </view>
				<wd-tag type="primary" class="checked" mark v-if="areaId==item.id">
					<wd-icon name="check-bold" />
				</wd-tag>
			</view>
		</scroll-view>
		<view class="btn-box justify-center">
			<wd-button class="btn" @tap="confirm"> 确认入库 </wd-button>
		</view>
	</wd-popup>
</template>

<script setup>
	import { ref } from 'vue'
	import { areaListApi, toWarehouseApi } from '@/api'
	const emit = defineEmits(['toWarehoused'])
	const show = ref(false)
	const areaId = ref(null)
	const areaList = ref([])
	const formData = ref()
	const pickArea = (id) => {
		areaId.value = id
	}
	const confirm = () =>{
		if(!areaId.value) return uni.showToast({ icon: 'none', title: '请选择区域' })
		const params = {
			...formData.value,
			area_id: areaId.value
		}
		toWarehouseApi(params).then(res =>{
			close()
			uni.showToast({
				icon: 'none',
				title: '入库成功'
			})
			emit('toWarehoused')
		}).catch(err =>{
			uni.showToast({
				icon: 'none',
				title: err.msg
			})
		})
	}
	const open = (param) =>{
		formData.value = param
		show.value = true
		areaListApi().then(res => {
			areaList.value = res
		})
	}
	const close = () => {
		show.value = false
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	:deep(.wd-popup) {
		padding: 20rpx !important;
		border-radius: 20rpx 20rpx 0 0;
		.poupu-title {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 20rpx;
		}
		.area-list {
			max-height: 800rpx;
			gap: 30rpx;
			.area-item {
				padding: 20rpx;
				position: relative;
				border-radius: 20rpx;
				border: 1px solid #eee;
				margin-bottom: 20rpx;
				.desc {
					color: #999;
					font-size: 24rpx;
					margin-top: 10rpx;
				}
				.checked {
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}
		}
		.btn-box {
			margin-top: 30rpx;
			.btn {
				width: 60%;
			}
		}
	}
</style>